<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>任务管理</title>
    <script th:replace="common/head::static"></script>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <fieldset class="layui-elem-field">
            <legend>条件搜索</legend>
            <form class="layui-form layui-card-header" id="sysJobSearchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">任务名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="jobName" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">日期范围</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="createdDateId" placeholder=" - ">
                            <!-- 设置日期 -->
                            <input type="text" name="createdDateStart" id="createdDateStart" th:hidden="true">
                            <input type="text" name="createdDateEnd" id="createdDateEnd" th:hidden="true">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <!-- type="button" 阻止默认行为提交form表单 -->
                        <button type="button" class="layui-btn" id="sysJobSearchBtn">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </fieldset>

        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn" id="sysJobAddBtn">
                    <i class="layui-icon layui-icon-add-circle-fine"></i>新增
                </button>
            </div>
            <table class="layui-hide" id="sysJobTable" lay-filter="sysJobTableFilter"></table>
            <script type="text/html" id="toolBars">
                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="detail">
                    <i class="layui-icon"></i>查看</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
                    <i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
                    <i class="layui-icon layui-icon-delete"></i>删除</a>
                <a class="layui-btn layui-btn-primary layui-btn-xs layui-bg-gray" lay-event="runOnce">
                    <i class="layui-icon layui-icon-triangle-r"></i>运行一次</a>
            </script>
            <script type="text/html" id="statusTpl">
                <input type="checkbox" _id="{{d.id}}" _jobGroup="{{d.jobGroup}}" _status="{{d.status}}" lay-skin="switch" lay-text="正常|暂停" lay-filter="statusTplFilter" {{ d.status=== '0' ? 'checked' : '' }}>
            </script>
        </div>
    </div>
</div>

<script th:src="@{/common/js/common.js}"></script>
<script th:inline="javascript">
    layui.use(['table', 'form', 'laydate'], function () {
        const table = layui.table
            , $ = layui.jquery
            , laydate = layui.laydate
            , form = layui.form;

        //执行一个laydate实例
        laydate.render({
            elem: '#createdDateId'//指定元素
            , range: true
            , type: 'date'
            , min: '1900-1-1'
            , max: '2099-12-31'
            , lang: 'cn'
            , theme: 'default'
            , calendar: true
            , format: 'yyyy-MM-dd'
            , done: function(value, date, endDate){
                // console.log(value); //得到日期生成的值，如：2017-08-18
                // console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                // console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                var dateArr = value.split(' - ');
                $('#createdDateStart').val(dateArr[0]);
                $('#createdDateEnd').val(dateArr[1]);
            }
        });

        const cols = [[
            {field: 'checkBox', checkbox: true, fixed: true}
            , {field: 'jobName', title: '任务名', align: 'center'}
            // , {field: 'jobGroup', title: '任务组名', align: 'center'}
            // , {field: 'invokeTarget', title: '调用目标字符串', align: 'center'}
            , {field: 'cronExpression', title: '执行表达式', align: 'center'}
            // , {
            //     field: 'misfirePolicy', title: '计划策略', align: 'center', templet: function (d) {
            //         if (d.misfirePolicy === '0') {
            //             return '默认';
            //         } else if (d.misfirePolicy === '1') {
            //             return '立即触发执行';
            //         } else if (d.misfirePolicy === '2') {
            //             return '触发一次执行';
            //         } else if (d.misfirePolicy === '3') {
            //             return '不触发立即执行';
            //         } else {
            //             return '-';
            //         }
            //     }
            // }
            // , {
            //     field: 'concurrent', title: '是否并发执行', align: 'center', templet: function (d) {
            //         return d.concurrent === '0' ? '允许' : '禁止';
            //     }
            // }
            , {field: 'status', title: '任务状态', align: 'center', templet: '#statusTpl'}
            // , {field: 'createdBy', title: '创建人', align: 'center'}
            , {field: 'createdDate', title: '创建时间', align: 'center'}
            , {field: 'op', title: '操作', align: 'center', width: '25%', toolbar: '#toolBars'} //这里的toolbar值是模板元素的选择器
        ]];

        const layuiTable = Common.getLayuiTable(table, '#sysJobTable', ctx + '/sysJob/findPage', cols);

        $('#sysJobSearchBtn').on('click', function () {
            Common.reloadTable($('#sysJobSearchForm'), layuiTable);
        });

        //监听工具条 https://www.layui.com/doc/modules/table.html#toolbar
        table.on('tool(sysJobTableFilter)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'detail') { //查看
                Common.openFrameArea('/sysJob/toDetail/' + data.id, '查看任务', ['600px', '520px'], function () {
                    console.log('toDetail');
                });
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    Common.ajaxDelete('/sysJob/delete/' + data.id, {}, function (res) {
                        layer.close(index);
                        layer.msg(res.message, {icon: 6}, function () {
                            $('#sysJobSearchBtn').click();
                        });
                    });
                });
            } else if (layEvent === 'edit') { //编辑
                Common.openFrameArea('/sysJob/toUpdate/' + data.id, '编辑任务', ['600px', '520px'], function () {
                    console.log('toUpdate');
                });
            } else if (layEvent === 'runOnce') { //运行一次
                Common.ajaxPost('/sysJob/run/' + data.id, {}, function (res) {
                    if (res.value === 200) {
                        layer.msg(res.message, {icon: 6});
                    } else {
                        layer.msg(res.message, {icon: 5});
                    }
                });
            }
        });

        $("#sysJobAddBtn").on('click', function () {
            Common.openFrameArea('/sysJob/toSave', '新增任务', ['600px', '520px'], function () {
                console.log('toSave');
            });
        });

        // 监听操作
        form.on('switch(statusTplFilter)', function (obj) {
            const params = {
                id: $(obj.elem).attr('_id'),
                jobGroup: $(obj.elem).attr('_jobGroup'),
                status: $(obj.elem).attr('_status') === '1' ? '0' : '1'
            }
            Common.ajaxPutJSON(ctx + '/sysJob/changeStatus', JSON.stringify(params), function (res) {
                if (res.value === 200) {
                    layer.msg(res.message, {icon: 1, time: 1000}, function () {
                        Common.reloadTable($('#sysJobSearchForm'), layuiTable);
                    });
                } else {
                    layer.msg(res.message, {icon: 2, time: 2000});
                }
            });
        });
    });

</script>
</body>
</html>